<template>
  <view class="person">
    <view class="top">
      <image src="../../static/logo.png" mode="scaleToFill"></image>
      <view class="text">浏览记录</view>
    </view>
    <view class="list">
      <view class="row" v-for="item in historyList" :key="item.id" @click="goDetail(item)">
        <newsbox :type="1" :item="item"></newsbox>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        historyList: []
      }
    },
    methods: {
      getHistory() {
        this.historyList = uni.getStorageSync("history") || []
        console.log(this.historyList);
      },
      clearHistory() {
        uni.removeStorage({
          key: 'history',
          success: () => {
        		  uni.showToast({
              title: '清除历史记录成功',
           			duration: 1000
            })
            this.getHistory()
          }
        });
      },
      goDetail(item) {
        // 添加到缓存
        uni.navigateTo({
          url: `/pages/detail/detail?id=${item.id}&cid=${item.classid}`
        })
      }
    },
    onLoad() {
      this.getHistory()
    },
    onTabItemTap(){
      this.getHistory()
    },
    onPullDownRefresh() {
      this.getHistory()
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 500)
    },
    onNavigationBarButtonTap(event) {
      console.log(event);
      this.clearHistory()
    }
  }
</script>

<style lang="scss">
  .person {
    .top {
      width: 100%;
      background: #eaeaea;
      padding: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      image {
        height: 150rpx;
        width: 150rpx;
      }

      .text {
        padding-top: 20rpx;
        font-size: 50rpx;
        color: #666;
      }
    }

    .list {
      padding: 20rpx;

      .row {
        padding-bottom: 30rpx;
      }
    }
  }
</style>
